.info-card {
  .value {
    font-family: 'Cambria', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
    // font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Microsoft YaHei";
  }
}

.info-card:hover {
  border-color: deepskyblue !important;
  border-style: solid;
  border-width: 1px;
  background-color: transparent !important;
}


.info-card-a {
  @extend .info-card;

  background: $panel-body-background-color;

  .text {
    background-color: transparent !important;
    color: $form-display-field-color !important;
  }

  .value {
    background-color: transparent !important;
    font-weight: 400;
    font-size: 30px;
    font-family: '时尚中黑简体', '微软雅黑';
    line-height: 30px;
  }

  .unit {
    background-color: transparent !important;
    font-size: 9px;
    color: $form-display-field-color !important;
  }
}

.info-card-c {
  @extend .info-card;

  text-align: left;
  font-size: 13px;
  line-height: 18px;

  .x-component {
    display: flex;
    align-items: center;
  }

  .x-fa {
    font-size: 16px;
    text-align: center;
  }

  .text {
    margin-left: 10px;
    justify-content: flex-start;
    color: $form-display-field-color !important;
  }

  .value {
    justify-content: flex-end;
    font-size: 24px;
    font-weight: bold;
    line-height: 24px;
  }

  .unit {
    justify-content: center;
  }
}

.info-card-d {
  @extend .info-card;

  text-align: center;
  font-size: 13px;
  background: $panel-body-background-color;

  .value {
    font-size: 36px;
    font-weight: bold;
    line-height: 38px;
  }

  .text {
    justify-content: flex-end;
    background-color: transparent !important;
    color: $form-display-field-color !important;
  }

  .unit {
    justify-content: flex-start;
    background-color: transparent !important;
    color: $form-display-field-color !important;
  }
}